<template>
  <div id="search">
    <div class="weui-search-bar" id="search_bar">
      <form class="weui-search-bar__form">
        <div class="weui-search-bar__box">
          <i class="weui-icon-search"></i>
          <input type="search" v-model="searchIpt" class="weui-search-bar__input" id="search_input" placeholder="搜索" ref="searchInput" @input="onInputChange" @focus="onInputFocus" @blur="onInputBlur"/>
<!--          <a class="weui-icon-clear" v-on:click="searchClear"></a>-->
        </div>
      </form>
      <a href="#" class="weui-btn weui-btn_mini weui-btn_primary" @click="onSearchButtonClick">搜索</a>
      </div>
    </div>
</template>
<script>
    export default {
        name: "search",
        data() {
            return {
                searchIpt: "",
                lastKeyPressed: null  // 新增属性
            }
        },
      mounted() {
        document.addEventListener('keydown', this.handleEsc);
        document.addEventListener('keydown', this.handleKeydown);
      },
      beforeDestroy() {
        document.removeEventListener('keydown', this.handleEsc);
        document.removeEventListener('keydown', this.handleKeydown);
      },
        methods: {
          handleEsc(event) {

            this.lastKeyPressed = event.key;  // 更新最后按下的键
            if (event.key === "Escape") {
              this.searchClear();
            }
          },
          handleKeydown(event) {
            if (event.ctrlKey && event.key === 'c') {
              event.preventDefault();
              return;
            }
            if (event.ctrlKey && event.key === 'v') {
              event.preventDefault();
              return;
            }

            // 检查按键是否是字母，并且输入框当前不是焦点
            if (event.key.length === 1 && event.key.match(/[a-z]/i) && document.activeElement !== this.$refs.searchInput) {
              this.$refs.searchInput.focus();
              // 可选：将按下的字母键添加到输入框中
              this.searchIpt = event.key;
            }

          },
          searchClear() {
            this.searchIpt = ""
            this.$store.dispatch('updateSearchIpt', "");
            this.$refs.searchInput.blur();
          },
          onInputChange(event) {
            console.log("按键是"+event.key)
            // if (this.lastKeyPressed === " ") {  // 检查是否是空格键
            //   this.$store.dispatch('updateSearchIpt', event.target.value);
            // }
          },
          onInputFocus() {
            this.$store.dispatch('updateDisplayType', 1);
          },
          onInputBlur() {
            if (this.searchIpt == ""){
              this.$store.dispatch('updateDisplayType', 0);
            }
          },
          onSearchButtonClick() {
            // 搜索按钮点击时的逻辑
            console.log("搜索: ", this.searchIpt);
            this.$store.dispatch('updateSearchIpt', this.searchIpt);
            // 这里可以添加实际的搜索逻辑
          },
        }
    }
</script>
<style lang="less">
    @import "../../assets/less/search.less";
    .weui-search-bar__form {
      display: flex; /* 启用 Flexbox 布局 */
      align-items: center; /* 垂直居中子元素 */
    }

    .weui-search-bar__box {
      flex-grow: 1; /* 让搜索框占据剩余空间 */
      //margin-right: 20%; /* 根据需要调整间距 */
    }

    /* 如果搜索按钮太大或太小，可以调整它的宽度或其他样式 */
    .weui-btn {
      /* 根据需要调整样式 */
      width: 20%;
    }

</style>